<template>
    <div class="sort">
      <div class="title">
        <el-button size="small" type="primary" :loading="loading" @click="handleSave">保存</el-button>
      </div>
      <div class="list-box">
        <el-table
          :data="tableData"
          border
          height="calc(100vh - 150px)"
          v-loading="tableLoading"
          class="table">
          <el-table-column
            type="index"
            width="60"
            align="center"
            label="序号">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="mdName"
            align="center"
            label="字段名">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="mdCode"
            align="center"
            label="字段code">
          </el-table-column>
          <el-table-column
            prop="isEnable"
            align="center"
            label="是否参与排序">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isEnable"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="ascending"
            align="center"
            label="升降序">
            <template slot-scope="scope">
              <el-switch
                :disabled="!scope.row.ascending"
                v-model="scope.row.ascending"
                active-value="1"
                inactive-value="2"
                active-text="升"
                inactive-text="降">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderNo"
            align="center"
            label="顺序">
            <template slot-scope="scope">
              <avue-input-number
                v-model="scope.row.orderNo"
                size="small"
                :precision="0"
                :disabled="!scope.row.orderNo"
                controls-position
                :min-rows="1"
                :max-rows="1000"></avue-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
import {
  editSortSet,
  getAllTable, sortSetList
} from '../../../../../../../api/electronicsFile/electronicsFile'

export default {
  name: 'sortSet', // 排序
  props: {
    idTable: {
      type: String
    }
  },
  data () {
    return {
      loading: false,
      tableLoading: true,
      page: {
        pageNo: 1,
        pageSize: 1000,
        params: [{
          name: 'idTable',
          op: 'eq',
          value: this.idTable
        }]
      },
      tableData: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      getAllTable(this.idTable, '4').then(ress => {
        this.tableData = []
        ress.data.data.map(item => {
          this.tableData.push({
            mdCode: item.mdCode,
            mdName: item.mdName,
            isEnable: false,
            orderNo: 1,
            width: 80
          })
        })
        sortSetList(this.page).then(res => {
          this.tableData.map(items => {
            res.data.data.list.map(item => {
              if (items.mdCode === item.mdCode) {
                items.isEnable = item.isEnable
                items.ascending = item.ascending + ''
              }
            })
          })
          this.tableLoading = false
        })
      })
    },
    handleSave () {
      this.loading = true
      this.tableData.map(item => {
        if (item.ascending) {
          item.ascending = Number(item.ascending)
        }
      })
      editSortSet(this.idTable, this.tableData).then(() => {
        this.$message.success('设置成功！')
        this.loading = false
        window.location.reload()
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sort{
  .title {
    text-align: right;
    padding: 10px 20px;
  }

  .list-box {
    .table {
      height: calc(100vh - 190px);
      margin-bottom: 10px;
    }
    .pages{
      padding-right: 15px;
    }
  }
}
</style>
